<template>
  <div class="admin">
    <n-space vertical>
      <n-layout has-sider>
        <n-layout-sider bordered collapse-mode="width" :collapsed-width="64" :width="240" :collapsed="collapsed"
          show-trigger @collapse="collapsed = true" @expand="collapsed = false">
          <div class="logo">
            <img src="@/assets/images/logo3.png" />
          </div>
          <n-menu v-model:value="activeKey" accordion :collapsed="collapsed" :collapsed-width="64"
            :collapsed-icon-size="22" :options="menuOptions" :expand-icon="expandIcon" :render-label="renderMenuLabel"
            :render-icon="renderMenuIcon" />
        </n-layout-sider>
        <n-layout>
          <el-scrollbar class="container">
            <router-view :key="route.name" v-slot="{ Component }">
              <transition>
                <component :is="Component" />
              </transition>
            </router-view>
          </el-scrollbar>
        </n-layout>
      </n-layout>
    </n-space>
  </div>
</template>

<script setup>
import { h, ref, watch } from "vue"
import { useRoute } from "vue-router"
import { useRouter } from "vue-router"
const route = useRoute()
const router = useRouter()
const intercepRourter = [
  "user",
  "installnotice",
  "installproclamation",
  "dashboard",
  "discussall",
  "discussreport",
  "problemlist",
  "problemtag",
  "problemcreate",
  "traininglist",
  "trainingcreate",
  "trainingcategory",
  "racelist",
  "racecreate",
]
const expandIcon = () => {
  return h("i", { class: ["iconfont icon-xiangyou1"] }, "")
}
const renderMenuLabel = (option) => {
  return option.label
}
const renderMenuIcon = (option) => {
  return h("i", { class: [option.icons, "iconfont"] }, "")
}
const activeKey = ref("")

watch(activeKey, (newVal) => {
  if (newVal.length == 0) {
    return
  }
  if (newVal.includes("training")) {
    router.push({
      path: `/admin/training/${newVal.slice(8)}`,
    })
    return
  }
  if (newVal.includes("problem")) {
    router.push({
      path: `/admin/problem/${newVal.slice(7)}`,
    })
    return
  }
  if (newVal.includes("discuss")) {
    router.push({
      path: `/admin/discuss/${newVal.slice(7)}`,
    })
    return
  }
  if (newVal.includes("install")) {
    router.push({
      path: `/admin/install/${newVal.slice(7)}`,
    })
    return
  }
  if (newVal.includes("race")) {
    router.push({
      path: `/admin/race/${newVal.slice(4)}`,
    })
    return
  }

  router.push({
    path: `/admin/${newVal}`,
  })
})

watch(route, (newV) => {
  if (newV != undefined && intercepRourter.includes(route.name)) {
    activeKey.value = route.name
  } else {
    activeKey.value = ""
  }
})
const menuOptions = ref([
  {
    label: "数据视图",
    key: "dashboard",
    icons: "icon-shuju8",
  },
  {
    label: "题目管理",
    key: "problemManage",
    icons: "icon-jiugongge1",
    children: [
      {
        label: "题目列表",
        key: "problemlist",
        icons: "icon-timu-04",
      },
      {
        label: "创建题目",
        key: "problemcreate",
        icons: "icon-tianjia1",
      },
      {
        label: "标签管理",
        key: "problemtag",
        icons: "icon-biaoqian",
      }
    ],
  },
  {
    label: "训练管理",
    key: "trainingManage",
    icons: "icon-shijuan",
    children: [
      {
        label: "训练列表",
        key: "traininglist",
        icons: "icon-liebiao2",
      },
      {
        label: "创建训练",
        key: "trainingcreate",
        icons: "icon-zengjia",
      },
      {
        label: "训练分类",
        key: "trainingcategory",
        icons: "icon-fenlei2",
      },
    ],
  },
  {
    label: "比赛管理",
    key: "raceManage",
    icons: "icon-bisai",
    children: [
      {
        label: "比赛列表",
        key: "racelist",
        icons: "icon-liebiao1",
      },
      {
        label: "创建比赛",
        key: "racecreate",
        icons: "icon-chuangjianrenwu",
      },
    ],
  },
  {
    label: "讨论管理",
    key: "discussion",
    icons: "icon-xiaoxi1",
    children: [
      {
        label: "讨论管理",
        key: "discussall",
        icons: "icon-pinglun",
      },
      {
        label: "举报管理",
        key: "discussreport",
        icons: "icon-jubao1",
      },
    ],
  },
  {
    label: "设置",
    key: "install",
    icons: "icon-shezhi1",
    children: [
      {
        label: "用户管理",
        key: "user",
        icons: "icon-yonghu1",
      },
      {
        label: "权限管理",
        key: "permission",
        icons: "icon-quanxianguanli",
      },
      {
        label: "公告管理",
        key: "installproclamation",
        icons: "icon-gonggao",
      },
      {
        label: "通知管理",
        key: "installnotice",
        icons: "icon-tongzhi",
      },
      {
        label: "系统设置",
        key: "setting",
        icons: "icon-shezhi1",
      }
    ],
  },
])
const collapsed = ref(false)
</script>

<style lang="less" scoped>
.admin {
  .logo {
    width: 100%;
    display: flex;

    img {
      margin: 5vh auto 5vh 2vw;
      width: 60%;
      height: 60%;
    }
  }

  .container {
    width: 100%;
    height: 100vh;
    background-color: @bgColor;
    padding: 0 0 0 0;
    display: block;
  }

  ::v-deep(.el-scrollbar) {
    border-radius: 0px !important;
  }
}
</style>
